<template>
	<div class="userSuggest">
        <!-- 头部 -->
        <div class="nav_top d-flex jc-between ai-center bg-white">
            <div> 
                <el-button type="text" @click="$router.go(-1)">
                    <div class="iconfont icon-back ml-1 fs-xxxl text-dark"></div>
                </el-button>
            </div>
            <div class="fs-xxl text-dark pr-3">
                意见反馈
            </div>
            <div></div>
        </div>

        <div class="px-3 py-3">
            <div class="fs-md py-2">问题描述</div>
            <div class="text mb-3">
              
                <el-input
                rows="9"
                class="textarea"
                type="textarea"
                placeholder="您的建议对我们非常重要"
                v-model="model.suggest"
                maxlength="30"
                show-word-limit
                >
              </el-input>
              
            </div>
            <div class="fs-md py-2">文件上传</div>
            <van-uploader v-model="imgList" multiple :after-read="afterRead"/>
            
            
            <el-button type="danger" class="pt-3" @click="postSuggest">提交</el-button>
        </div>
      

	</div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  data() {
   return {
    url: '',

    imgList: [],
    model: {
      fileList: [],
      suggest: ''
    },
    formData: null
    

  }
},
methods: {
  async afterRead(file) {
      console.log(file)
      // 此时可以自行将文件上传至服务器
      this.formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
      this.formData.append('file', file.file);
      console.log(this.formData.file)
      const res = await this.$http.post(`/user/upload.do?`,this.formData)
      this.model.fileList.push({url: res.data})
      
    },
  async postSuggest(){
     if (this.textarea === '') {
      Toast('内容不能为空！')
      return
     }
     const res = await this.$http.post('user/suggest.do',this.model)
     if (res.data.code != 0) {
      this.textarea = ''
      Toast(res.data.message)
      this.$router.go(-1);
     }else{
      Toast('提交失败！')
     }
  }

},
created(){

},
mounted() {   //在页面创建之前设置body的背景色
  document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
}, 
    beforeDestroy() {   //在页面销毁之前移除body的属性，目的是设置的颜色只对当前页面有效
      document.querySelector('body').removeAttribute('style')
    },

}
</script>

<style lang="scss" scoped>
	.el-button {
		width: 100%;
		
	}
.text {
  // box-shadow: 0 0 4px rgba(0, 0, 0,0.2);
}
.textarea {
  border: none;
  
}
.el-textarea__inner {
  border: none;
}
.el-input__inner {
  border: 1px solid white !important;
}
</style>